<template>
	<view class="child">
		<view class="experience">
			<view class="item">
				<view class="exp_title">服务经验</view>
				<view class="exp_content mt21">
					<view>{{userInfo.working_years}} 年</view>
				</view>
			</view>
			<view class="item">
				<view class="exp_title">擅长装修风格</view>
				<view class="exp_content mt21">
					<view v-for="(item,index) in userInfo.good_at_style"
                      :key="index">{{item}}</view>
					  <!-- {{ item + index && index != userInfo.good_at_style.length - 1?'、':'' }} -->
				</view>
			</view>
			<view class="item">
				<view class="exp_title">手机号</view>
				<view class="exp_content hasright">
					<view>{{userInfo.contact_phone}}</view>
						<image :src="`${constant.imgUrl}design/dial.png`" @click="phoneCall(userInfo.contact_phone)"></image>
				</view>
			</view>
			<view class="item">
				<view class="exp_title">微信号</view>
				<view class="exp_content hasright">
					<view class="weixin_id">{{userInfo.wechat_number}}</view>
						<!-- #ifdef MP-WEIXIN -->
						<image :src="`${constant.imgUrl}design/copy.png`" @click="copy(userInfo.wechat_number)"></image>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<!-- <div v-clipboard:copy="userInfo.wechat_number" v-clipboard:success="onCopy">
							<image  :src="`${constant.imgUrl}design/copy.png`"></image>
						</div> -->
						<div :data-clipboard-text="userInfo.wechat_number" class="copy">
							<image  :src="`${constant.imgUrl}design/copy.png`"></image>
						</div>
						<!-- #endif -->
				</view>
			</view>
			<view class="item">
				<view class="exp_title">所在城市</view>
				<view class="exp_content hasright">
					<view class="exaddress">{{userInfo.city_name}}</view>
						<image v-show="hidefans" :src="`${constant.imgUrl}design/navgato.png`"></image>
				</view>
			</view>
			<view class="item">
				<view class="exp_title">个人简介</view>
				<view class="exp_content mt21">
					<view>{{userInfo.motto}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex'
// #ifdef H5
import Vue from 'vue'
// import VueClipboard from 'vue-clipboard2'
// Vue.use(VueClipboard)

import Clipboard from 'clipboard'
// #endif

export default {
	name: 'DesignerData',
	data() {
		return {
			constant: this.$constant,
			hidefans: false
		}
	},
	computed: {
	  ...mapGetters({ userInfo: 'getBasicUser' })
	},
	methods: {
		phoneCall(phoneNum) {
			uni.makePhoneCall({
				phoneNumber: phoneNum
			})
		},
		// #ifndef H5
		copy(txt) {
			uni.setClipboardData({
				data: txt,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				},
				fail: () => {
					uni.showToast({
						title: '复制失败,请重试',
						icon: 'none'
					})
				}
			})
		},
		// #endif
		// #ifdef H5
		   copy() {
			var clipboard = new Clipboard('.copy')
			clipboard.on('success', e => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
				clipboard.destroy()
			})
			clipboard.on('error', e => {
				// 不支持复制
				console.log('该浏览器不支持自动复制') // 释放内存
				clipboard.destroy()
			})
		},
		// #endif
		  onCopy(e) { // 复制
		  console.log(e, '复制事件')
			if (e.text == '') {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			} else {
                    	uni.showToast({
					title: '复制失败,请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.mt21 {
	margin-top: 21px;
}
.child {
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 80px;
}

.experience {
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-bottom: 90px;
}

.experience .item {
    margin-top: 30px;
    width: 100%;
}

.experience .item .exp_title {
    color: #999999;
	font-size:28px;
	line-height: 1;
}

.exp_content {
    width: 100%;
	height: auto;
	line-height: 1;
	image {
		width: 120px;
		height: 60px;
	}
}
.exp_content view {
	line-height: 1;
}
.experience .item .exp_content view {
    font-size:24px;
				margin-bottom: 10px;
				margin-top: 10px;
}
.experience .item .hasright {
	display: flex;
    justify-content: space-between;
	align-items: center;
	margin-top: 6px;
}
.experience .item .hasright view {
    margin-top: 10px;
}

.exp_content navigator {
    width: 120px;
    height: 60px;
    background: #f2f2f4;
    border-radius: 30px;
}

.exp_content navigator image {
    width: 100%;
    height: 100%;
}

.exaddress {
    display: -webkit-box;
    word-break: break-all;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 4.5rem;
}
</style>
